<template>
	<view class="mainpadding beijingse">
		<view class="textcenter titletext">实付金额</view>
		<view class="daheitext margin_top textcenter">
			<text class="margin_right1" v-if="xianjin">现金：{{xianjin}}</text>
			<text v-if="jifen">积分：{{jifen}}</text>
		</view>
		<view class="ffffff mainpadding radius margin_top" @click="jifenclick()">
			<view class="flexbetween ">
				<view class="flexleft">
					<view class="jifen margin_right1"></view>
					<view class="notitletext margin_right1">积分</view>
					<view class="huisetext">(可用{{personInfo.integral_price || "0.00"}})</view>
				</view>
				<!-- 已勾选 -->
				<view class="yigouxuan margin_right3" v-if="checkjf"></view>
				<!-- 未勾选 -->
				<view class="weigouxuan margin_right3" v-if="!checkjf"></view>
			</view>
		</view>
		<view class="mainpadding ffffff radius margin_top">
			<view class="titletext">选择现金支付方式</view>
			<view class="flexbetween margin_top xiahuax" @click="changetype(1)">
				<view class="flexleft">
					<view class="weixin margin_right1"></view>
					<view class="notitletext">微信</view>
				</view>
				<!-- 已勾选 -->
				<view class="yigouxuan margin_right3" v-if="paytype==1"></view>
				<!-- 未勾选 -->
				<view class="weigouxuan margin_right3" v-if="paytype!=1"></view>
			</view>
			<view class="flexbetween margin_top xiahuax" @click="changetype(2)">
				<view class="flexleft">
					<view class="zhifub margin_right1"></view>
					<view class="notitletext">支付宝</view>
				</view>
				<!-- 已勾选 -->
				<view class="yigouxuan margin_right3" v-if="paytype==2"></view>
				<!-- 未勾选 -->
				<view class="weigouxuan margin_right3" v-if="paytype!=2"></view>
			</view>
			<view class="flexbetween margin_top" @click="changetype(3)">
				<view class="flexleft">
					<view class="yinhk margin_right1"></view>
					<view class="notitletext margin_right1">银行卡</view>
					<view class="huisetext" v-if="!personInfo.user_bank">（暂未绑卡点击去绑卡）</view>
					<!-- <view class="huisetext" v-if="personInfo.user_bank">{{personInfo.user_bank.open_bank}}
					</view> -->
				</view>
				<!-- 已勾选 -->
				<view class="yigouxuan margin_right3" v-if="paytype==3 && personInfo.user_bank"></view>
				<!-- 未勾选 -->
				<view class="weigouxuan margin_right3" v-if="paytype!=3 && personInfo.user_bank"></view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb">
			<!-- <view class="bigbtn">立即兑换</view> -->
			<view class="bigbtn" @click="atoncepay">立即支付</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				lastmsg: {
					buy_type: "", //购买类别1普通商品,2返利商品
					order_pay_no: "", //订单号
					pay_price: "" //支付金额
				},
				personInfo: {
					"integral_price": "",
					"user_bank": {
						"id": 1,
						"bank_realname": "",
						"bank_cardno": "",
						"open_bank": "",
						"bank_address": "",
						"user_id": 2,
					},
				},
				checkjf: false,
				jifen: "",
				xianjin: "",
				openid:"",
				paytype: 1, //1微信支付，2支付宝支付，3银行卡支付
			}
		},
		onLoad(options) {
			this.lastmsg = JSON.parse(decodeURIComponent(options.msg));
			this.openid = uni.getStorageSync("openid")
			this.xianjin = this.lastmsg.pay_price
		},
		onShow() {
			this.init()
		},
		methods: {
			
			init() {
				httpRequest.request('/api/user/index', 'POST', {}, false, false, true).then(res => {
					if (res.code == 1) {
						this.personInfo = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 积分勾选
			jifenclick() {
				if (this.checkjf) {
					this.checkjf = false
					this.jifen = ""
					this.xianjin = this.lastmsg.pay_price
				} else {
					if (Number(this.lastmsg.pay_price) > Number(this.personInfo.integral_price)) {
						this.xianjin = Number(this.lastmsg.pay_price) - Number(this.personInfo.integral_price)
						this.jifen = this.personInfo.integral_price
					}
					if (Number(this.lastmsg.pay_price) <= Number(this.personInfo.integral_price)) {
						this.jifen = this.lastmsg.pay_price
						this.xianjin = ""
					}
					this.checkjf = true
				}
			},
			changetype(i) {
				this.paytype = i
				if (i == 3 && !this.personInfo.user_bank) {
					uni.navigateTo({
						url: "/pages/mypage/yinhangkbd"
					})
					return
				}
			},
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			// 立即支付
			atoncepay() {
				let order_from = 10 //订单来源，10H5，20App
				// #ifdef H5
				order_from = 10
				// #endif
				// #ifdef APP-PLUS
				order_from = 20
				// #endif
				if(order_from==10 && this.paytype==1 && !this.isWechat()){
					httpRequest.toast("请在微信中打开此网址，否则将影响您的微信支付功能")
					return false
				}
				httpRequest.modal('提示', '确定支付当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/order/payment', 'POST', {
							order_from: order_from,
							type: this.paytype, //1,微信支付，2支付宝支付
							score_dk: this.checkjf ? 1 : 0, //0不积分抵扣，1积分抵扣
							order_pay_no: this.lastmsg.order_pay_no,
							openid:this.openid
						}, false, false, true).then(res => {
							if(res.code==2){//直接支付成功
								setTimeout(() => {
									uni.reLaunch({
										url: "/pages/homepage/homepage"
									})
									// uni.navigateBack(1)
								}, 1000)
								return false
							}
							if (res.code == 1) {//需要唤起微信或者支付宝支付的
								// H5微信
								if (order_from == 10 && this.paytype == 1) {
									this.hpay(res.data.appconfig)
								}
								// H5支付宝
								if (order_from == 10 && this.paytype == 2) {
									this.payment(res.data)
								}
								// app微信
								if (order_from == 20 && this.paytype == 1) {
									this.appwxpay(res.data)
								}
								// app支付宝
								if (order_from == 20 && this.paytype == 2) {
									this.appzfbpay(res.data)
								}
								return false
							}
							httpRequest.toast(res.msg);
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			// H5微信支付
			hpay(data) {
				
				WeixinJSBridge.invoke('getBrandWCPayRequest', {
					"appId": data.appId, //公众号ID，由商户传入    
					"timeStamp": data.timeStamp, //时间戳，自1970年以来的秒数    
					"nonceStr": data.nonceStr, //随机串    
					"package": data.package,
					"signType": data.signType, //微信签名方式：    
					"paySign": data.paySign //微信签名
				}, function(res) {
					//android：支付成功、支付失败、取消支付  都能执行这个回调
					//ios：支付失败、取消支付  能执行这个回调， 支付成功不执行这个回调
					// alert('支付结果：' + res.err_msg);
					console.log('支付结果：', res.err_msg)
					if (res.err_msg == "get_brand_wcpay_request:ok") {
						// 使用以上方式判断前端返回,微信团队郑重提示：
						//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						// alert('支付成功！');
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/homepage/homepage"
							})
							// uni.navigateBack(1)
						}, 1000)
					}
					if (res.err_msg == "get_brand_wcpay_request:cancel") {
						// alert('你已经取消支付了！');
					}
					if (res.err_msg == "get_brand_wcpay_request:fail") {
						// alert('支付失败了！');
					}
				});
			},
			// app微信支付
			appwxpay(data) {
				uni.requestPayment({
					provider: 'wxpay',
					orderInfo: data.appconfig, //后台返回的支付数据
					success: function(res) {
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/homepage/homepage"
							})
						}, 1000)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			// H5支付宝支付
			payment(data) {
				let that = this
				//#ifdef H5
				// 将接口返回的form表单显示到页面
				document.querySelector('body').innerHTML = data.appconfig;
				// 调用submit方法
				document.forms[0].submit()
				//#endif
			},
			appzfbpay(data) {
				uni.requestPayment({
					provider: 'alipay',
					orderInfo: data.appconfig, //后台返回的支付数据
					success: function(res) {
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/homepage/homepage"
							})
						}, 1000)
					},
					fail: function(err) {
						console.log(err)
					}
				});
			},
			isWeixin() {
				let ua = window.navigator.userAgent.toLowerCase()
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				}
				return false;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.huisetext {
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.jifen {
		width: 32rpx;
		height: 32rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/jf.png');
	}

	.yinhk {
		width: 32rpx;
		height: 32rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/yhk.png');
	}

	.fulijuan {
		width: 32rpx;
		height: 32rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/flj.png');
	}

	.weixin {
		width: 32rpx;
		height: 32rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/weixin.png');
	}

	.zhifub {
		width: 32rpx;
		height: 32rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/zhifub.png');
	}

	.xiahuax {
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
	}

	.daheitext {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}
</style>